<template>
  <div style="height:calc( 100% - 23px );width:100%;" class="row1 acen">
    <div style="width:10%" @click="gotopre()">
      <el-tooltip effect="dark" content="上一个" placement="top-start">
        <i style="color:#fff;font-size:30px;cursor:pointer"  class="el-icon-arrow-left"></i>
      </el-tooltip>
    </div>
  
  <video
        id="my-player"
        ref="myPlayer"
        class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid thecatchphoto"
        preload="auto"
        autoplay
        style="width: 100%;height: 100%;"
        data-setup="{}"
      ></video>
    <div style="width:10%" @click="gotonext()">
      <el-tooltip effect="dark" content="下一个" placement="top-start">
        <i style="color:#fff;font-size:30px;cursor:pointer" class="el-icon-arrow-right"></i>
      </el-tooltip>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      player: null,
      camName: "海康-4",
      src: "",
      options: {
        sources: [
          {
            src:
              "rtmp://222.211.78.77:1935/video?type=Play&sourceid=0000000000200000000000000610006:0000000000140000000000000580001:222.211.78.73:610000\\",
            type: "rtmp/flv"
          }
        ],
        muted: true,
        controls: true,
        autoplay: true,
        techOrder: ["html5", "flash"],
        // flash: {
        //   swf: "./static/video-js.swf" //如果是本地视频  需要相应的videoJS.swf文件
        // },
        controlBar: {
          captionsButton: true,
          remainingTimeDisplay: false,
          progressControl: false,
          fullscreenToggle: true
        }
      },
      videoList: [
        "大华-1",
        "大华-2",
       
        "海康-1",
        "海康-2",
        "海康-3",
        "海康-4",
        "海康-5",
        "海康-6",
        "海康-7",
        "海康-8",
        "海康-9",
        "海康-10",
        "海康-11",
        "海康-12",
        "海康-13",
        "海康-14",
        "海康-15",
        "海康-16",
        "海康-17",
        "海康-18",
        "海康-19",
        "海康-20",
        "海康-21",
        "海康-22",
        "海康-23",
        "海康-24",
        "海康-25",
        "海康-26",
        "海康-27",
        "海康-28",
        "海康-30",
        "海康-32"
      ]
    };
  },
  created() {
    // this.gotopre();
  },
  mounted() {
    
    let that = this;
    
    that.playVideo(this.camName);
  
    
  },
  
  beforeDestroy: function() {
    const videoDom = this.$refs.myPlayer; //不能用document 获取节点
    if (videoDom) {
      this.$video(videoDom).dispose(); //销毁video实例，避免出现节点不存在 但是flash一直在执行
      this.player.dispose(); //销毁video实例
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const videoDom = this.$refs.myPlayer; //不能用document 获取节点
    if (videoDom) {
      this.$video(videoDom).dispose(); //销毁video实例，避免出现节点不存在 但是flash一直在执行
      this.player.dispose(); //销毁video实例
    }
    });
    
  }
  ,
  methods:{
    gotopre(){
      let camName = this.camName;
      let arr = this.videoList;
      for (let i in arr) {
        if (camName == arr[i] && i > 0) {
          this.camName = arr[i - 1];
          this.selectVideo(arr[i - 1]);
          break;
        }
      }
    },
    gotonext() {
      let camName = this.camName;
      let arr = this.videoList;
      // for (let i = 0; i < arr.length - 1; i++) {
      //   if (camName == arr[i] && i < arr.length - 2) {
      //     this.camName = arr[i + 1];
      //     this.selectVideo(arr[i + 1]);
      //     break;
      //   }
      // }
       this.selectVideo(camName)
    },
    selectVideo(camName) {
      let _this = this;
      _this.axios
        .get("https://wx.honghengxinxi.com:3033/playUrl/video", {
          params:{
             camName: camName
          }
        })
        .then(res => {
          window.console.log(res)
         _this.playerOptions['sources'][0]['src'] = res.data;
          // _this.player = _this.$video("my-player", _this.options, function() {
          //   _this.player.off("timeupdate"); //移除timeupdate事件
          //   _this.player.reset(); //重置 video
          //   _this.player.src([
          //     {
          //       type: "rtmp/flv",
          //       src: res
          //     }
          //   ]);
          //   _this.player.load(_this.src);
          //   _this.player.play();
          // });
        });
    },
    playVideo(camName) {
      let that = this;
      that.axios
        .get("https://wx.honghengxinxi.com:3033/playUrl/video", {
          params:{
             camName: camName
          }
        })
        .then(res => {
          that.player = that.$video("my-player", {
            
          sources: [
          {
            src: res.data,
            type: "rtmp/flv"
          }
        ],
        muted: true,
        controls: true,
        autoplay: true,
        techOrder: ["html5", "flash"],
        controlBar: {
          captionsButton: true,
          remainingTimeDisplay: false,
          progressControl: false,
          fullscreenToggle: true
        }
      }, function() {
            this.play();
        
          });
        });
    }
  }
};
</script>
<style scoped>
  .test_two_box,
.video-js {
  height: 220px;
  width: 65%;
}
.scl {
  width: 50px;
  height: 50px;
  font-size: 30px;
  line-height: 47px;
  border-radius: 50%;
  background: #041b35;
  opacity: 0.6;
  cursor: pointer;
}
.scl:hover {
  background: #072e5a;
  opacity: 1;
}
</style>
